<template>
  <view class="flex_page">
    <cl-nav-bar></cl-nav-bar>
    <uni-card
      :title="detailData.shotName"
      :sub-title="detailData.name"
      :extra="detailData.selfFlag === 'true' ? '自营' : '非自营'"
      :thumbnail="detailData.homeImgUrl"
      @click="onClick"
    >
      <view class="mall_info">
        <view class="mall_info_des">
          <xzj-readMore hideLineNum="2" showHeight="100">
            {{ detailData.des }}
          </xzj-readMore>
        </view>
        <view class="mall_info_item" @click="handleNav"
          ><view
            ><uni-icons type="navigate" size="20" color="#333"></uni-icons
            ><text class="ml_10">导航到店</text></view
          ><uni-icons type="right" size="16" color="#ccc"></uni-icons
        ></view>
        <view class="mall_info_item" @click="_callPhone(detailData.telInfo)"
          ><view class="flex_center"
            ><uni-icons type="phone-filled" size="20" color="#333"></uni-icons
            ><text class="ml_10">联系商家</text></view
          ><uni-icons type="right" size="16" color="#ccc"></uni-icons
        ></view>
        <view class="mall_info_item"
          ><view class="flex_center"
            ><uni-icons type="shop-filled" size="20" color="#333"></uni-icons
            ><text class="ml_10"
              >营业时间 {{ detailData.businessHours }}</text
            ></view
          ></view
        >
      </view>
    </uni-card>
    <view class="goodsList">
      <text class="goodsList_title">店铺商品</text>
      <cl-scroll-view
        ref="listRef"
        :autoLoad="false"
        :apiFun="getGoodsList"
        :params="{ mallLocationId: mallId, unTenant: true }"
      >
        <template v-slot:list="{ list }">
          <view class="goods">
            <view
              v-for="(item, idx) in list"
              :key="idx"
              class="goods_item"
              @click="_toPage(`/pages/goods/detail?id=${item.id}`)"
            >
              <image
                class="goods_item_image"
                :src="item.homeImgUrl"
                mode="aspectFill"
              />
              <text class="goods_item_name exceed_omit_2">{{ item.name }}</text>
              <view class="goods_item_label">
                <text
                  v-for="itm in item.labels"
                  :key="itm"
                  class="goods_item_label_item"
                  >{{ itm }}</text
                >
              </view>
              <view class="goods_item_price">
                <text class="show">￥{{ item.showPrice }}</text>
                <text class="real">￥{{ item.actualPrice }}</text>
              </view>
              <view class="goods_item_des exceed_omit_2">{{ item.des }}</view>
            </view>
          </view>
        </template>
      </cl-scroll-view>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app'
import { onMounted } from 'vue'

const mallId = ref()
const detailData = ref({})

const listRef = ref()
onLoad((options) => {
  mallId.value = options.id
  getMallDetail(mallId.value)
})

onMounted(() => {
  listRef.value.refresh()
})

const getMallDetail = (id) => {
  uni
    .request({
      url: '/shop/mallLocationController/' + id,
    })
    .then((res) => {
      if (res.length > 0) {
        detailData.value = res[0]
      }
    })
}

const getGoodsList = (data) => {
  return uni.request({
    url: '/shop/goodsController/listOpen',
    method: 'GET',
    data,
    autoUnpack: false,
  })
}

const handleNav = () => {
  if (!detailData.value.gpsInfo) {
    return uni.showToast({
      title: '暂未保存店铺地址，请直接电话联系！',
    })
  }
  const [longitude, latitude, name] = detailData.value.gpsInfo.split(',')
  uni.openLocation({
    latitude: Number(latitude),
    longitude: Number(longitude),
    name,
  })
}
</script>

<style lang="scss" scoped>
.mall_info {
  font-size: 28rpx;
  color: #333;
  &_des {
    margin-bottom: 20rpx;
    font-size: 28rpx;
  }
  &_item {
    display: flex;
    justify-content: space-between;
    padding: 6rpx;
    margin-bottom: 10rpx;
    border-radius: 10rpx;
  }
}
.goodsList {
  flex: 1;
  overflow: hidden;
  padding: 15px;
  box-sizing: border-box;
  &_title {
    font-size: 32rpx;
    font-weight: bold;
  }
}
.goods {
  margin-top: 20rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  &_item {
    border-radius: 10rpx;
    padding: 10rpx 16rpx;
    box-sizing: border-box;
    box-shadow: 0px 8px 24px 0px rgba(149, 157, 165, 0.2);
    width: 48%;
    margin-bottom: 40rpx;
    &_image {
      width: 100%;
      height: 300rpx;
    }
    &_name {
      font-size: 28rpx;
      font-weight: bold;
    }
    &_label {
      display: flex;
      flex-wrap: wrap;
      &_item {
        margin-top: 10rpx;
        margin-right: 10rpx;
        font-size: 24rpx;
        border-radius: 6rpx;
        background: #81a9f0;
        color: #fff;
        padding: 6rpx;
      }
    }
    &_price {
      display: flex;
      align-items: flex-end;
      margin-top: 10rpx;
      font-size: 40rpx;
      color: #ff5000;
      .real {
        margin-left: 20rpx;
        font-size: 28rpx;
        text-decoration: line-through;
      }
    }
    &_des {
      margin-top: 10rpx;
      font-size: 24rpx;
    }
  }
}
</style>
